<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <script src="jquery.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        * {
            box-sizing: border-box;
        }

        #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
            overflow: hidden;
        }

        .bg {
            width: 100%;
            height: 500px;
            background: #02030d;
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
        }

        .bg .bg-inner {
            width: 50%;
            height: 100%;
        }

        .bg .bg-inner .title {
            text-align: center;
            background: linear-gradient(to bottom, #198bbf, #214d68 90%);
            -webkit-background-clip: text;
            color: transparent;
            margin: 0;
            font-size: 32px;
            line-height: 2;
        }

        .bg-inner .show-draw {
            width: 100%;
            height: calc(100% - 100px);
            position: relative;
        }

        .bg-inner .show-draw .draw {
            width: 70%;
            height: 100%;
            float: left;
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
        }

        .bg-inner .show-draw .show {
            width: 30%;
            height: 100%;
            float: left;
        }

        .bg-inner .btn-group {
            width: 100%;
            text-align: center;
        }

        .bg-inner .btn-group .btn {
            font-size: 16px;
            padding: 5px 10px;
            text-align: center;
            display: inline-block;
            background: #259af7;
            color: #FFF;
            cursor: pointer;
            line-height: 1.5;
        }

        .bg-inner .show-draw .draw .draw_center {
            width: 300px;
            height: 300px;
            float: left;
            display: flex;
            align-items: center; /*定义body的元素垂直居中*/
            justify-content: center; /*定义body的里的元素水平居中*/
        }

        .bg-inner .show-draw .draw .draw_side {
            width: calc((100% - 300px) / 2);
            height: 300px;
            float: left;
        }

        /*效果*/
        .load-outer {
            width: 100%;
            height: 100%;
            z-index: 1;
            border: 3px solid #042044;
            border-radius: 300px;
            box-shadow: 0 0 30px 0 #001c3f inset;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .load-outer.shiney {
            animation-name: shiney;
            animation-duration: 500ms;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        @keyframes shiney {
            0% {
                width: 100%;
                height: 100%;
                transform: rotate(0deg);
            }
            25% {
                width: 97%;
                height: 97%;
                transform: rotate(45deg);
            }
            50% {
                width: 95%;
                height: 95%;
                transform: rotate(90deg);
            }
            70% {
                width: 97%;
                height: 97%;
                transform: rotate(180deg);
            }
            100% {
                width: 100%;
                height: 100%;
                transform: rotate(360deg);
            }
        }

        .load-circle {
            width: 35%;
            height: 35%;
            transform: rotate(0deg);
            background: #FFF;
            z-index: 2;
            border-radius: 300px;
            box-shadow: 0 0 75px 0 #17486d inset;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .load-circle.shiney1 {
            animation-name: shiney1;
            animation-duration: 500ms;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        @keyframes shiney1 {
            0% {
                width: 35%;
                height: 35%;
            }
            25% {
                width: 35%;
                height: 35%;
            }
            50% {
                width: 35%;
                height: 35%;
            }
            75% {
                width: 49%;
                height: 49%;
            }
            100% {
                width: 63%;
                height: 63%;
            }
        }

        .load-inner {
            width: 90%;
            height: 90%;
            transform: rotate(0deg);
            background: #7d7e7d;
            z-index: 4;
            border-radius: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /*
            .load-inner {
                width: 84.210526%;
                height: 84.210526%;
                z-index: 2;
                border: 5px solid #0098f7;
                border-radius: 300px;
                box-shadow: 0 0 40px 0 #0098f7 inset;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        */

        .load-inner.shiney2 {
            animation-name: shiney2;
            animation-duration: 500ms;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        @keyframes shiney2 {
            0% {
                transform: scale(1);
                background: #7d7e7d;
            }
            25% {
                transform: scale(1.5);
                background: rgba(125, 126, 125, 0.71);
            }
            37.5% {
                transform: scale(1.75);
                background: #FFF;
            }
            50% {
                transform: scale(2.0);
                background: #FFF;
            }
            62.5% {
                transform: scale(2.0);
                background: #02030d;
            }
            75% {
                transform: scale(1.5);
                background: #02030d;
            }
            90% {
                transform: scale(1.2);
                background: #02030d;
            }
            100% {
                transform: scale(1);
                background: #02030d;
            }
        }


    </style>
</head>
<body>
<div id="container">
    <div class="bg">
        <div class="bg-inner">
            <h1 class="title">/恭喜你获得/</h1>
            <div class="show-draw">
                <div class="draw">
                    <span class="draw_side"></span>
                    <div class="draw_center">
                        <div class="load-outer">
                            <div class="load-circle">
                                <div class="load-inner">
                                    <div class="gift">
                                        <span><img src="meizu_16x.png"></span>
                                        <span>魅族16X</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <span class="draw_side"></span>
                </div>
                <div class="show">

                </div>
            </div>
            <div class="btn-group">
                <span class="btn" onclick="chouJiang()">抽奖</span>
            </div>
        </div>
    </div>
</div>
<script>

    /**
     * 抽奖
     */
    function chouJiang() {
        $(".load-outer").addClass("shiney");
        $(".load-circle").addClass("shiney1");
        $(".load-inner").addClass("shiney2");
        setTimeout(function () {
            $(".load-outer").removeClass("shiney");
            $(".load-circle").removeClass("shiney1");
            $(".load-inner").removeClass("shiney2");
        }, 500);
    }

</script>

</body>
</html>
